<template>
  <div class="crash-report7">
    <el-row>
      <el-col :span="24">
        <div id="carrier-report" style="width: 100%; height:350px;" v-loading="carrierLoading"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import echarts from 'echarts'

  var resultData = {
    telecom: [8.99, 5.75, 2.98],
    unicom: [15.25, 4.54, 2.59],
    mobile: [13.07, 9.37, 3.37]
  }

  export default {
    data () {
      return {
        carrierLoading: false,
        chartsInstance: {
          carrier: ''
        },
        resultData: resultData
      }
    },
    activated () {
      this.initEcharts()
    },
    methods: {
      initEcharts () {
        var vm = this
        vm.chartsInstance.carrier = echarts.init(document.getElementById('carrier-report'))
        vm.getCarrierReport()
        window.addEventListener('resize', () => {
          vm.chartsInstance.carrier.resize()
        })
      },
      getCarrierReport () {
        var vm = this
        vm.carrierLoading = true
        var option = {
          title: {
            text: '应用网络错误运营商对比'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            formatter: '{b}<br/>{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}: {c2}%'
          },
          legend: {
            itemWidth: 10,
            itemHeight: 10,
            left: 'center',
            top: 20,
            data: ['中国电信', '中国移动', '中国联通']
          },
          // color: ['#0C81C6', '#395AA7', '#69AD4A'],
          color: ['#00c0ef', '#00a65a', '#f39c12'],
          grid: {
            left: '3%',
            right: '4%',
            top: '20%',
            bottom: 10,
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            data: ['2G', '3G', '4G']
          },
          yAxis: {
            name: '单位：%',
            nameGap: 20,
            type: 'value',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            interval: 5,
            min: 0,
            max: 20,
            axisLabel: {
              // formatter: '{value} %'
              formatter: function (value) {
                return value.toFixed(2) + '%'
              }
            }
          },
          series: [
            {
              name: '中国电信',
              type: 'bar',
              symbol: 'rect',
              symbolSize: 6,
              data: vm.resultData.telecom,
              label: {
                normal: {
                  show: true,
                  color: '#333',
                  position: 'top',
                  formatter: '{c}%'
                }
              }
            },
            {
              name: '中国移动',
              type: 'bar',
              symbol: 'rect',
              symbolSize: 6,
              data: vm.resultData.mobile,
              label: {
                normal: {
                  show: true,
                  color: '#333',
                  position: 'top',
                  formatter: '{c}%'
                }
              }
            },
            {
              name: '中国联通',
              type: 'bar',
              symbol: 'rect',
              symbolSize: 6,
              data: vm.resultData.unicom,
              label: {
                normal: {
                  show: true,
                  color: '#333',
                  position: 'top',
                  formatter: '{c}%'
                }
              }
            }
          ]
        }
        vm.chartsInstance.carrier.setOption(option)
        vm.carrierLoading = false
      }
    }
  }
</script>
<style scoped>
.el-row{
  margin-bottom: 20px;
}
</style>

